<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <c:set var="path" value="${pageContext.request.contextPath}"></c:set>
    <link rel="shortcut icon" href="${path}/images/titleico.ico">
    <link rel="stylesheet" href="${path}/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="${path}/layui/css/formSelects-v4.css">
    <script src="${path}/layui/layui.js"></script>
    <script src="${path}/js/jquery.js"></script>
</head>
<body>
<br>
<h1 style="text-align: center">商品库存列表</h1>
<hr class="layui-bg-blue">
<div class="layui-form-item">
    <div class="layui-inline">
        <div class="layui-form" action="">
            <!--商品名-->
            <label class="layui-form-label">商品名称：</label>
            <div class="layui-input-inline" style="width: 175px;">
                <input value="" id="mingcheng" name="name" type="text" autocomplete="off" class="layui-input">
            </div>
            <!--商品类型-->
            <label class="layui-form-label">商品类型：</label>
            <div class="layui-input-inline" style="width: 280px;">
                <select id="sptype" name="type" class="layui-select" lay-filter="sptype">
                    <option value="-1">请选择</option>
                </select>
            </div>
            <!--查询-->
            <div class="layui-input-inline" style="width: 100px;">
                <button class="layui-btn layui-btn-normal" onclick="searchData();"><i class="layui-icon layui-icon-search"></i> 查询</button>
            </div>
        </div>
    </div>
</div>
<hr class="layui-bg-blue">
<table class="layui-table" lay-data="{
            id:'spTable',
            url:'${path}/Shopping/list',
            page:true,
            toolbar:'#toolbarDemo',
            defaultToolbar: ['filter', 'print', 'exports'],
            even: true,
            loading: true
        }"
       lay-filter="spTable">
    <thead>
    <tr>
        <th lay-data="{type:'checkbox'}"></th>
        <th lay-data="{field:'id',width:150,templet:'#idTem',align:'center',style:'background-color: #66BB6A;color: #fff;'}">商品编号</th>
        <th lay-data="{field:'name', sort: true}">商品名称</th>
        <th lay-data="{field:'shoppingType.type',templet:'#leixing', sort: true}">商品类型</th>
        <th lay-data="{field:'price',templet:'#jiage'}">商品价格(元)</th>
        <%--<th lay-data="{field:'num',templet:'#geshu'}">商品数量</th>--%>
        <th lay-data="{field:'total'}">商品库存</th>
        <th lay-data="{toolbar: '#barDemo'}">操作</th>
    </tr>
    </thead>
</table>

<%--添加/修改-form--%>
<div id="addandup" style="display: none">
    <br>
    <br>
    <div class="layui-form-item">
        <div class="layui-inline">
            <form action="" id="spforms" lay-filter="spforms" name="spforms">
                <div class="layui-form" action="">
                    <div class="layui-inline">
                        <!--商品名-->
                        <input type="hidden" id="bianhao" name="id">
                        <label class="layui-form-label">商品名称：</label>
                        <div class="layui-input-inline" style="width: 175px;">
                            <input value="" id="sname" name="name" type="text" autocomplete="off" placeholder="请填写商品名称" class="layui-input">
                        </div>
                        <!--商品类型-->
                        <label class="layui-form-label">商品类型：</label>
                        <div class="layui-input-inline" style="width: 280px;">
                            <select name="typeid" id="typeleixing" class="layui-select" lay-filter="sptype">
                                <option value="-1">请选择</option>
                            </select>
                        </div>
                    </div>
                    <div style="height: 30px;"></div>
                    <div class="layui-inline">
                        <label class="layui-form-label">总价格：</label>
                        <div class="layui-input-inline" style="width: 175px;">
                            <input value="" name="price" id="sjiage" type="text" autocomplete="off" placeholder="请填写商品价格" class="layui-input">
                        </div>
                        <label class="layui-form-label">总库存：</label>
                        <div class="layui-input-inline" style="width: 175px;">
                            <input value="" name="total" id="skucun" type="text" autocomplete="off" placeholder="请填写商品的总库存" class="layui-input">
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

<script type="text/html" id="idTem">
    {{d.id< 10 ? 'SP 0'+d.id :  'SP '+d.id}}
</script>
<script type="text/html" id="jiage">
    {{d.price< 10 ? d.price+'（元）' :  d.price+'（元） '}}
</script>
<script type="text/html" id="geshu">
    {{d.num< 10 ? d.num+'（个）' :  d.num+'（个） '}}
</script>
<script type="text/html" id="leixing">
    {{d.shoppingType.type}}
</script>
<script>
    function searchData(){
        layui.table.reload("spTable",{
            page:{
                curr : 1
            },
            where:{
                "name":$("#mingcheng").val(),
                "typeid" : $("#sptype").val()
            }
        });
    }
    //加载表格 表单
    layui.use(["form","table"], function(){
        var table = layui.table;
        //头工具栏事件
        table.on('toolbar(spTable)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id);
            switch(obj.event){
                case "add":
                    layer.open({
                        type:1,
                        title :'添加商品',
                        area : '750px',
                        content: $("#addandup"),
                        skin:'layui-layer-molv',
                        btn : ['添加','取消'],
                        success:function(){

                            fomrReset();
                        },
                        yes : function (index) {
                            var name = $("#sname").val();
                            var typeid = $("#typeleixing").val();
                            var price = $("#sjiage").val();
                            var total = $("#skucun").val();
                            if(name == null || name == ""){
                                layer.msg("<v style='color:red'>" + "商品名不能为空！" + "</v>", {time: 1200, icon: 5}),function () {
                                    return false;
                                };
                            }else if(typeid == null || typeid == -1){
                                layer.msg("<v style='color:red'>" + "没有选中商品类型！" + "</v>", {time: 1200, icon: 5}),function () {
                                    return false;
                                };
                            }else if(price == null || price == ""){
                                layer.msg("<v style='color:red'>" + "价格不能为空！" + "</v>", {time: 1200, icon: 5}),function () {
                                    return false;
                                };
                            }else if(total == null || total == ""){
                                layer.msg("<v style='color:red'>" + "库存不能为空！" + "</v>", {time: 1200, icon: 5}),function () {
                                    return false;
                                };
                            }else{
                                var params = $("#spforms").serialize();
                                // console.log(params);
                                $.post('${path}/Shopping/add',params,function () {
                                    layer.msg("商品添加成功！");
                                    layer.close(index);
                                    table.reload('spTable');
                                });
                            }
                        }
                    });
                    break;
                //批量删除
                case 'getCheckLength':
                    var sp = table.checkStatus("spTable");
                    var data = sp.data;
                    if (data.length == 0){
                        layer.msg("请选择要删除的数据",function () {
                            return;
                        });
                    }else{
                        layer.confirm("真的要删除这么多数据吗？",{icon:5,title: "儿童乐园友情提示！"},function (index) {
                            var params = "";
                            for (let spo of data){
                                params += "id="+spo.id+"&";
                            }
                            $.post("${path}/Shopping/batchDelete",params,function () {
                                layer.close(index);
                                table.reload("spTable");
                                layer.msg("批量删除成功")
                            })
                        });
                    }
                    break;
            };
        });
        //监听行工具时间
        table.on("tool(spTable)",function (obj) {
            var objdata = obj.data;
            if (obj.event == 'edit'){
                //edit
                layer.open({
                    type:1,
                    title : '修改商品',
                    content: $("#addandup"),
                    area:'750px',
                    skin:'layui-layer-molv',
                    btn:['修改','取消'],
                    success:function(){
                        $.get('${path}/Shopping/idshopping',{id:objdata.id},function (data) {
                            //显示数据
                            console.log(data);
                            $("#bianhao").val(data.id);
                            $("#sname").val(data.name);
                            $("#sjiage").val(data.price);
                            $("#skucun").val(data.total);
                            $("#typeleixing").val(data.shoppingType.id);
                            layui.form.render('select');
                        });
                    },
                    yes:function (index) {
                        var name = $("#sname").val();
                        var typeid = $("#typeleixing").val();
                        var price = $("#sjiage").val();
                        var total = $("#skucun").val();
                        if(name == null || name == ""){
                            layer.msg("<v style='color:red'>" + "商品名不能为空！" + "</v>", {time: 1200, icon: 5}),function () {
                                return false;
                            };
                        }else if(typeid == null || typeid == -1){
                            layer.msg("<v style='color:red'>" + "没有选中商品类型！" + "</v>", {time: 1200, icon: 5}),function () {
                                return false;
                            };
                        }else if(price == null || price == ""){
                            layer.msg("<v style='color:red'>" + "价格不能为空！" + "</v>", {time: 1200, icon: 5}),function () {
                                return false;
                            };
                        }else if(total == null || total == ""){
                            layer.msg("<v style='color:red'>" + "库存不能为空！" + "</v>", {time: 1200, icon: 5}),function () {
                                return false;
                            };
                        }else{
                            var params = $("#spforms").serialize();
                            // console.log(params);
                            $.get('${path}/Shopping/update',params,function (data) {
                                if(data){
                                    layer.close(index);
                                    layer.msg("修改成功!");
                                    table.reload("spTable");
                                }else{
                                    layer.msg("由于某种原因修改失败!");
                                }
                            })
                        }
                    }
                });
            }else if(obj.event == 'del'){
                //delete
                layer.open({
                    time:0,
                    title:'儿童乐园友情提示！',
                    content:"确定要删除该行数据吗？",
                    shade: [0.3, '#000'],
                    btn:['确定','取消'],
                    yes : function () {
                        $.post("${path}/Shopping/batchDelete",{"id":objdata.id},function () {
                            layer.msg('删除成功');
                            table.reload('spTable');
                        });
                    }
                })
            }
        })

    });
    //去Shopping/shoppingType中取下拉框的数据
    $.get("${path}/Shopping/shoppingType",function (data) {
        $.each(data,function () {
            var opt = $("<option></option>").appendTo("#sptype");
            opt.text(this.type).val(this.id);
        });

    });

    //添加时去Shopping/shoppingType中取下拉框的数据
    $.get("${path}/Shopping/shoppingType",function (data) {
        $.each(data,function () {
            var opt = $("<option></option>").appendTo("#typeleixing");
            opt.text(this.type).val(this.id);
        });

    });

</script>
<script type="text/html" id="barDemo">
    <a href="javascript:void(0)" lay-event="edit"><i class="layui-icon layui-icon-edit"></i></a>&nbsp;&nbsp;&nbsp;
    <a href="javascript:void(0)" lay-event="del"><i class="layui-icon layui-icon-close" style="font-weight: bold"></i></a>
</script>
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm layui-btn layui-btn-danger" lay-event="getCheckLength"><i class="layui-icon layui-icon-delete"></i>批量删除</button>
        <button class="layui-btn layui-btn-sm layui-btn layui-btn-normal" lay-event="add"><i class="layui-icon layui-icon-add-1"></i>添加商品</button>
    </div>
</script>
<script>
    function fomrReset(){
        document.getElementById("spforms").reset();
    }
</script>
</body>
</html>